<route lang="json5">
{
  style: {
    navigationBarTitleText: '推广订单明细',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="order">
    <wd-sticky>
      <div class="custom-tabs">
        <wd-tabs
          v-model="tab"
          swipeable
          :lineWidth="24"
          :lineHeight="3"
          color="#070B1A"
          inactiveColor="#8A8F99"
        >
          <wd-tab v-for="(item, index) in tabList" :key="index" :title="item.title"></wd-tab>
        </wd-tabs>
      </div>
    </wd-sticky>

    <LoadPage ref="loadPage" :testList="[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]">
      <template #default="{ list }">
        <div class="order-list" v-if="list.length > 0">
          <OrderItem v-for="(item, index) in list" :key="index" :hotel="item" />
        </div>
      </template>
    </LoadPage>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/index'
import OrderItem from './components/OrderItem.vue'

const appStore = useUserStore()

const tab = ref<number>(0)
const tabList = ref([
  {
    title: '全部',
  },
  {
    title: '已付款',
  },
  {
    title: '已结算',
  },
  {
    title: '已失效',
  },
])

// 上拉加载
const loadPage = ref()
onReachBottom(() => {
  loadPage.value?.getMore()
})
// 下拉刷新
onPullDownRefresh(() => {
  if (appStore.isLogged) {
    loadPage.value?.getData({}, true)
  } else {
    uni.stopPullDownRefresh()
  }
})

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
onHide(() => {
  scrollTop.value = 0
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0,
  })
})
</script>

<style scoped lang="scss">
.order {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: var(--bgc4);
  .order-list {
    padding: 28rpx 30rpx 0;
  }
}
</style>
